<template>
  <div>
    <el-container class="container">
      <el-aside class="aside" :width="asideWidth">
        <router-link class="brand" to="/">
          OA
          <span v-show="!isCollapse">系统</span>
        </router-link>
        <el-menu active-text-color="#ffd04b" background-color="#343a40" class="el-menu-vertical-demo"
          :default-active="default_active" text-color="#fff" :collapse="isCollapse" :collapse-transition="false"
          :unique-opened="true" :router="true">
          <template v-for="route in routes[0].children">
            <template v-if="authStore.has_permission(route.meta.permissions, route.meta.opt)">
              <el-menu-item v-if="!route.children" :index="route.name" :route="{ name: route.name }" :key="route.name">
                <el-icon>
                  <component :is="route.meta.icon" />
                </el-icon>
                <span>{{ route.meta.text }}</span>
              </el-menu-item>
              <el-sub-menu v-else :index="route.name" :key="route.path">
                <template #title>
                  <el-icon>
                    <component :is="route.meta.icon" />
                  </el-icon>
                  <span>{{ route.meta.text }}</span>
                </template>
                <div v-for="child in route.children" :key="child.name">
                  <div v-if="authStore.has_permission(child.meta.permissions, child.meta.opt)">
                    <el-menu-item :index="child.name" :route="{ name: child.name }" v-if="!child.meta.hidden">
                      <el-icon>
                        <component :is="child.meta.icon" />
                      </el-icon>
                      <span>{{ child.meta.text }}</span>
                    </el-menu-item>
                  </div>
                </div>
              </el-sub-menu>
            </template>
          </template>
          <!-- 
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <BellFilled />
              </el-icon>
              <span>通知管理</span>
            </template>
            <el-menu-item index="3-1" :route="{ name: 'public' }">
              <el-icon>
                <ChatLineSquare />
              </el-icon>
              <span>发布通知</span>
            </el-menu-item>
            <el-menu-item index="3-2" :route="{ name: 'list' }">
              <el-icon>
                <Comment />
              </el-icon>
              <span>通知列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Checked />
              </el-icon>
              <span>员工管理</span>
            </template>
            <el-menu-item index="4-1" :route="{ name: 'add' }">
              <el-icon>
                <User />
              </el-icon>
              <span>新增员工</span>
            </el-menu-item>
            <el-menu-item index="4-2" :route="{ name: 'staff' }">
              <el-icon>
                <Avatar />
              </el-icon>
              <span>员工列表</span>
            </el-menu-item>
          </el-sub-menu> -->
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="left-header">
            <el-button v-show="isCollapse" :icon="Expand" @click="onCollapseAside" />
            <el-button v-show="!isCollapse" :icon="Fold" @click="onCollapseAside" />
          </div>
          <div class="right-header">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar :size="30" icon="UserFilled" />
                <span style="margin-left: 10px">[{{ displayUser.department.name }}]{{
                  displayUser.realname
                }}</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="onResetPwd">修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="onExit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改密码弹窗对话框 -->
    <el-dialog v-model="dialogVisible" title="修改密码" width="500">
      <el-form :model="form" :rules="rules" ref="formTag">
        <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldpwd">
          <el-input v-model="form.oldpwd" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newpwd">
          <el-input v-model="form.newpwd" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="pwd">
          <el-input v-model="form.pwd" autocomplete="off" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="frame">
import routes from "@/router/frame";
import { ref, reactive, onMounted, computed } from "vue";
import { Expand, Fold } from "@element-plus/icons-vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import authHttp from "@/api/authHttp";
import { ElMessage } from "element-plus";

const authStore = useAuthStore();
const router = useRouter();

let displayUser = reactive({
  realname: "",
  department: {}
})

// 侧边栏收缩状态
let isCollapse = ref(false);
let asideWidth = computed(() => {
  if (isCollapse.value) return "64px";
  else return "250px";
});

const onCollapseAside = () => {
  isCollapse.value = !isCollapse.value;
};

// 退出登录
const onExit = () => {
  authStore.logout();
  router.push({ name: "Login" });
};

// 修改密码弹窗
let dialogVisible = ref(false);
let formTag = ref();
let formLabelWidth = "100px";
let form = reactive({
  oldpwd: "",
  newpwd: "",
  pwd: "",
});

const onResetPwd = () => {
  form.oldpwd = "";
  form.newpwd = "";
  form.pwd = "";
  dialogVisible.value = true;
  // formTag.value.resetFields();
};

const rules = {
  oldpwd: [
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在6到20个字符", trigger: "blur" },
  ],
  newpwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在6到20个字符", trigger: "blur" },
  ],
  pwd: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在6到20个字符", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== form.newpwd) {
          callback("两次密码输入不一致!");
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const onSubmit = () => {
  formTag.value.validate(async (valid) => {
    // alert(form.oldpwd ,"2", form.newpwd ,"3", form.pwd);
    if (valid) {
      try {
        await authHttp.reSetPwd(form.oldpwd, form.newpwd, form.pwd);
        ElMessage.success("修改密码成功，请重新登录");
        authStore.logout();
        router.push({ name: "Login" });
      } catch (detail) {
        ElMessage.error(detail);
      }
    } else {
      ElMessage.error("请检查输入项");
    }
  });
  dialogVisible.value = false;
};

let default_active = ref('home');
onMounted(() => {
  default_active.value = router.currentRoute.value.name;
  displayUser.realname = authStore.user.realname;
  displayUser.department = authStore.user.department;
})

</script>

<style scoped>
.container {
  height: 100vh;
  background-color: #f4f6f9;
}

.aside {
  background-color: #343a40;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}

.aside .brand {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #434a50;
  background-color: #232631;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.header {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  outline: none;
}

.el-menu {
  border-right: 0;
}
</style>
